<template>
    <div>
        <el-row>
            <el-col :span="18">
                <div>
                    <el-date-picker
                            class="mt"
                            v-model="form.purchase"
                            type="datetimerange"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            range-separator="至"
                            start-placeholder="操作时间开始"
                            end-placeholder="操作时间结束">
                    </el-date-picker>
                    <el-select v-model="form.wid" placeholder="选择仓库" clearable class="mt">
                        <el-option
                                v-for="item in warehouse"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select v-model="form.type" placeholder="操作方式" clearable>
                        <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input placeholder="商品关键字" style="width: 37%" class="mt"></el-input>
                </div>
            </el-col>
            <el-col :span="6">
                <div style="text-align: right" class="mt">
                    <el-button type="primary" @click="_giftBillLogs" plain>搜索</el-button>
                    <el-button type="primary" @click="exportExcel">导出记录</el-button>
                </div>
            </el-col>
        </el-row>

        <!--表格开始-->
        <el-table :data="tableData" v-loading="loading" style="width: 100%;margin-top: 15px;" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column label="仓库名称">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: column;color: #409eff" v-if="scope.row.type === 2">
                        <span>从: {{ scope.row.old_warehouse_name }}</span>
                        <span>到: {{ scope.row.warehouse_name }}</span>
                    </div>
                    <span v-else>{{ scope.row.warehouse_name }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作方式">
                <template slot-scope="scope">
                    <span v-if="scope.row.type === 0" style="color: #e95783">采购</span>
                    <span v-else-if="scope.row.type === 1" style="color: #fbb13e">出库</span>
                        <span v-else-if="scope.row.type === 2" style="color: #67c23a">调拨</span>
                </template>
            </el-table-column>
            <el-table-column label="商品与库存">
                <template slot-scope="scope">
                    <div style="display: flex;flex-direction: column">
                        <span v-for="item in scope.row.gifts">
                            {{ item.name }}
                            <i style="font-style: normal;padding-left: 5px;">
                                (<em style="font-style: normal;color: #67c23a" v-if="scope.row.type === 0">+{{ item.total }}</em>
                                <em style="font-style: normal;color: #e95783" v-else-if="scope.row.type === 1">-{{ item.total }}</em>
                                <em style="font-style: normal;color: #409EFF" v-else-if="scope.row.type === 2">{{ item.total }}</em>)
                            </i>
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作人" prop="create_username"></el-table-column>
            <el-table-column label="操作时间" prop="create_time"></el-table-column>
            <el-table-column label="备注" prop="remark"></el-table-column>
        </el-table>

        <!--分页-->
        <Pagination @handleClickPage="currentPage" :total="total"></Pagination>
    </div>
</template>

<script>
    import { warehouseList, giftBillLogs } from '../../api/warehouseApi'
    import { exportGiftBill } from '../../api/publicApi'
    import Pagination from '../../components/pagination'
    export default {
        name: "warehouse-water",
        data () {
            return {
                tableData: [],
                loading: true,
                total: 0,
                page: 1, // 页数
                form: {
                    purchase: [],
                    putInStorage: [],
                    wid: '',
                    type: '',
                },
                warehouse: [],
                options: [
                    {
                        id: 0,
                        name: '采购'
                    },
                    {
                        id: 1,
                        name: '出库'
                    },
                    {
                        id: 2,
                        name: '调拨'
                    }
                ]
            }
        },
        created() {
            this._warehouseList()
            this._giftBillLogs()
        },
        methods: {
            search() {
                console.log(this.form)
            },
            async _warehouseList() {
                // let data = {p: this.page, length: 10}
                const res = await warehouseList()
                // console.log(res)
                this.warehouse = res.data.list
            },
            async _giftBillLogs() {
                let data = {p: this.page, length:　10, wid: this.form.wid, type: this.form.type}
                const res = await giftBillLogs(data)
                console.log(res)
                this.tableData = res.data.list
                this.total = res.data.total
                this.loading = false
            },
            // 分页的 当前点击的页数
            currentPage(newPage) {
                console.log(`当前页: ${newPage}`)
                this.page = newPage
                this.loading = true
                this._giftBillLogs()
            },
            async exportExcel() {
                let param = new URLSearchParams()
                param.append("p", this.page)
                param.append("length", 10000)
                param.append('wid', this.form.wid)
                param.append('type', this.form.type)
                param.append("export", 1)
                const res = await exportGiftBill(param)
                // console.log(res)
                const link = document.createElement('a')
                let blob = new Blob([res],{type: 'application/vnd.ms-excel'});
                link.style.display = 'none'
                link.href = URL.createObjectURL(blob)
                let num = new Date().getTime()
                console.log(num)
                link.setAttribute('download', `仓库流水_${num}.xlsx`)
                document.body.appendChild(link)
                link.click()
                document.body.removeChild(link)
            }
        },
        components: {
            Pagination
        }
    }
</script>

<style scoped lang="scss">
    .mt {
        margin-top: 5px;
    }
</style>
